<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button class="filter-item" @click="handleAdd(-1)" type="primary" icon="el-icon-plus">添加</el-button>
      <el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="请输入关键词" v-model="search.keyword"></el-input>
      <el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <tree-table :data="tableData" :columns="columns" border :expandAll="true" ref="tree">
      <el-table-column show-overflow-tooltip label="图标" width="80" align="center">
        <template slot-scope="scope">
          <i :class="['iconfont',scope.row.functionIcon]"></i>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="属性">
        <template slot-scope="scope">
          <template v-if="scope.row.functionType===2">
            <el-tag type="info" size="mini">功能码</el-tag> {{scope.row.functionCode}}</template>
          <template v-else>{{scope.row.functionUri}}</template>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="!scope.row.functionStatus" type="success" size="mini">启用</el-tag>
          <el-tag v-else type="danger" size="mini">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUp(scope.row)">上移</el-button>
          <el-button size="mini" @click="handleDown(scope.row)">下移</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.functionLibraryId < 1" @click="handleAdd(scope.row.functionId)" :disabled="scope.row.functionType===2">添加下级</el-button>
          <el-button size="mini" v-if="scope.row.functionLibraryId < 1" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" v-if="scope.row.functionLibraryId < 1" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>
    <edit v-if="edit" :data="selectTable" @getData="getData"></edit>
  </div>
</template>

<script>
import { funcList, funcRemove, funcOrder } from '@/utils/api'
import waves from '@/directive/waves' // 水波纹指令
import treeTable from '@/components/TreeTable'
import edit from './edit'
export default {
  directives: {
    waves
  },
  data() {
    return {
      columns: [
        {
          text: '名称',
          value: 'functionName',
          width: 200
        }
      ],
      tableData: [],
      search: {
        keyword: ''
      },
      selection: [],
      selectTable: {},
      pload: false,
      edit: false
    }
  },
  components: {
    edit,
    treeTable
  },
  created() {
    this.getData()
  },
  methods: {
    handleAdd(pid) {
      this.selectTable = {
        method: 'add',
        orderId: 0,
        functionStatus: 0,
        parentFunctionId: pid
      }
      this.edit = true
    },
    async handleDelete(index, row) {
      this.$confirm('确认要删除吗', { type: 'warning' }).then(async() => {
        try {
          this.pload = false
          await funcRemove({ functionId: row.functionId })
          this.$notify({ title: '删除成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = true
        }
      })
    },
    handleUp(row) {
      const cur = row._level === 1 ? this.tableData : row.parent.children
      const index = cur.indexOf(row)
      cur[index] = cur.splice(index - 1, 1, cur[index])[0]
      this.handleOrder()
    },
    handleDown(row) {
      const cur = row._level === 1 ? this.tableData : row.parent.children
      const index = cur.indexOf(row)
      cur[index] = cur.splice(index + 1 === cur.length ? 0 : index + 1, 1, cur[index])[0]
      this.handleOrder()
    },
    async handleOrder() {
      const list = this.$refs.tree.formatData.map((i, index) => {
        return i.functionId
      }).join(',')

      console.log(list)
      await funcOrder({ ids: list })
      this.$notify({ title: '排序成功', type: 'success', duration: 1000 })
    },
    handleEdit(index, row) {
      this.selectTable = row
      this.selectTable.method = 'edit'
      this.edit = true
    },
    async getData() {
      this.pload = false
      const Datas = await funcList({ functionName: this.search.keyword })
      this.tableData = Datas[0].children
      this.pload = true
    },
    handleFilter() {
      this.getData()
    }
  }
}
</script>
